<template>
  <div class="list-page">
    <div class="tabs flex" v-if="show">
      <div
        class="tabs-box"
        v-for="(item, index) in tabData"
        :key="item.id"
        @click="changeTab(index, item)"
        :class="{ active: active == index }"
      >
        <h2 class="top-tit">{{ item.tit }}</h2>
        <div class="bot-desc">{{ item.desc }}</div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="goods flex-wrap" v-if="list.length">
      <div
        :class="showStyle ? 'good-item' : 'good-itema'"
        v-for="item in list"
        :key="item.goods_id"
        @click="$router.push({ name: 'goods', params: { id: item.goods_id } })"
      >
        <img :src="item.goods_thumb" alt="" />
        <div class="good-desc">
          <p>{{  item.title || item.goods_name }}</p>
          <div
            class="price"
            :style="{ 'text-align:left;': $route.path.includes('list') }"
          >
            {{ item.shop_price_formated }}
          </div>
          <div v-if="$route.path.includes('list')">
            <div class="top">
              {{ item.rz_shop_name == "商创自营" ? "自营" : "进店" }}
            </div>
            <div class="bot">
              <div>{{ item.sale }}人已购买</div>
              <i class="iconfont icon-gouwuche"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "@/event";
export default {
  data() {
    return {
      active: 0,
      showStyle: true,
    };
  },
  props: ["show", "list", "tabData"],
  mounted() {
    bus.$on("toggle", (val) => {
      this.showStyle = val;
    });
  },
  created() {},
  methods: {
    changeTab(id, value) {
      this.active = id;
      // console.log(id);
      this.$emit("changeTab", value);
    },
  },
};
</script>

<style lang="less" scoped>
.list-page {
  background-color: #f4f4f4;
  .tabs {
    text-align: center;
    .tabs-box {
      border-right: 1px solid #ccc;
      flex: 1;
      .top-tit {
        font-size: 1.6rem;
        color: #333;
        margin-bottom: 0.5rem;
      }
      .bot-desc {
        font-size: 1.2rem;
        color: #666;
        width: 6.4rem;
        height: 1.8rem;
        margin: 0.2rem auto 0;
        line-height: 1.8rem;
        border-radius: 0.9rem;
      }
    }
    .active {
      .bot-desc {
        background: linear-gradient(-88deg, #ff4f2e, #f91f28);
        color: #fff;
      }
    }
    .tabs-box:last-child {
      border: 0;
    }
  }
  .goods {
    justify-content: start;
    .good-item {
      height: 29.4rem;
      margin: 0.5rem 0.75rem;
      background-color: #fff;
      border-radius: 10%;
      img {
        width: 17rem;
        border-radius: 10%;
        height: 17rem;
      }
      .good-desc {
        width: 17rem;
        box-sizing: border-box;
        padding: 1rem;
        p {
          width: 15rem;
          height: 4.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 1.5rem;
          line-height: 2.1rem;
        }
        .price {
          color: #ff4f2e;
          font-size: 1.8rem;
          margin-top: 0.8rem;
          font-weight: 600;
        }
        .bot {
          display: flex;
          justify-content: space-between;
          div {
            color: #999999;
          }
          i {
            color: #f91f28;
          }
        }
        .top {
          width: 3.4rem;
          height: 1.6rem;
          background-color: red;
          color: #fff;
          border-radius: 2px;
          text-align: center;
        }
      }
    }
    .good-itema {
      height: 13.2em;
      width: 100%;
      text-align: left;
      margin: 0.5rem 0.75rem;
      background-color: #fff;
      border-radius: 10%;
      display: flex;
      align-items: center;
      img {
        width: 9rem;
        height: 9rem;
      }
      .good-desc {
        // width: 17rem;
        flex: 1;
        box-sizing: border-box;
        padding: 1rem;
        p {
          // width: 15rem;
          height: 4.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          font-size: 1.5rem;
          line-height: 2.1rem;
        }
        .price {
          color: #ff4f2e;
          font-size: 1.8rem;
          margin-top: 0.8rem;
          font-weight: 600;
        }
        .bot {
          display: flex;
          justify-content: space-between;
          div {
            color: #999999;
          }
          i {
            color: #f91f28;
          }
        }
        .top {
          width: 3.4rem;
          height: 1.6rem;
          background-color: red;
          color: #fff;
          border-radius: 2px;
          text-align: center;
        }
      }
    }
  }
}
</style>